<template>
  <div class="wrapper">
    <!-- 搜索 -->
    <div class="search">
      <div class="search__area">
        <i class="iconfont">&#xe699;</i>
        <input
          ref="inputEl"
          @change="handleSearchChange"
          type="text"
          maxlength="20"
          class="search__area__input"
          placeholder="山姆会员商店优惠商品"
        />
      </div>
      <button class="search__btn" @click="handleCancelClick">取消</button>
    </div>
    <!-- 搜索历史记录 -->
    <div class="searchHistory">
      <div class="searchHistory__header">
        <h4 class="searchHistory__header__title">搜索历史</h4>
        <span class="searchHistory__header__clear" @click="handleClearHistory"
          >清除搜索历史</span
        >
      </div>
      <ul class="searchHistory__lists">
        <li
          class="searchHistory__lists__item"
          v-for="item in history"
          :key="item"
          @click="() => goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 热门搜索 -->
    <div class="hotSearch">
      <div class="hotSearch__header">
        <h4 class="hotSearch__header__title">热门搜索</h4>
      </div>
      <ul class="hotSearch__lists">
        <li
          class="searchHistory__lists__item"
          v-for="item in HotSearchList"
          :key="item"
          @click="() => goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { get } from '../../utils/request';

// // 获取热门 词
const useHotSearchEffect = () => {
  const HotSearchList = ref([]);
  const getHotSearchList = async () => {
    let result = await get('/api/shop/search/hot-words');
    // console.log(result);
    if (result?.errno === 0 && result?.data?.length) {
      // console.log(result.data);
      HotSearchList.value = result.data;
    }
  };

  return { HotSearchList, getHotSearchList };
};
export default {
  name: 'Search',
  setup() {
    const router = useRouter();
    const inputEl = ref(null);
    const history = ref(JSON.parse(localStorage.history || '[]'));
    // 用户输入内容后，操作
    const handleSearchChange = (e) => {
      console.log(e.target.value);
      const searchValue = e.target.value.trim();
      // 没内容输入
      if (!searchValue) return;
      const hasValue = history.value.find((item) => item === searchValue);
      // 历史记录中没有
      if (!hasValue) {
        inputEl.value.value = '';
        history.value.unshift(searchValue);
        localStorage.history = JSON.stringify(history.value);
      }
      router.push(`/searchList?keyword=${searchValue}`);
    };
    // 清除历史记录
    const handleClearHistory = () => {
      history.value = [];
      localStorage.history = JSON.stringify([]);
    };
    // 取消搜索执行操作
    const handleCancelClick = () => {
      router.back();
    };
    // 获取热门
    const { HotSearchList, getHotSearchList } = useHotSearchEffect();
    getHotSearchList();
    // 点击 跳转
    const goToSearchList = (keyword) => {
      router.push(`/searchList?keyword=${keyword}`);
    };

    return {
      history,
      inputEl,
      HotSearchList,
      handleSearchChange,
      handleClearHistory,
      handleCancelClick,
      goToSearchList,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '../../style/variables.scss';
.wrapper {
  margin: 0 0.18rem;
  width: 3.39rem;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.16rem;
  color: $content-fontColor;
  &__area {
    width: 2.95rem;
    height: 0.32rem;
    line-height: 0.32rem;
    border-radius: 0.16rem;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.16rem;
    &__input {
      flex: 1;
      height: 0.32rem;
      outline: none;
      background-color: #f5f5f5;
      padding: 0 0.1rem;
      border-radius: 0.16rem;
      font-size: 0.14rem;
    }
    i {
      margin: 0.08rem 0 0.08rem 0.16rem;
      color: #b7b7b7;
    }
  }
  &__btn {
    width: 0.32rem;
    line-height: 0.16rem;
    font-size: 0.16rem;
  }
}

.searchHistory {
  margin-top: 0.24rem;
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 0.22rem;
    color: $content-fontColor;
    &__title {
      font-size: 0.16rem;
    }
    &__clear {
      font-size: 0.14rem;
    }
  }
  &__lists {
    display: flex;
    flex-wrap: wrap;
    margin: 0.12rem 0 0 -0.1rem;
    &__item {
      height: 0.32rem;
      line-height: 0.32rem;
      font-size: 0.14rem;
      border-radius: 0.02rem;
      margin-left: 0.1rem;
      margin-top: 0.12rem;
      padding: 0 0.1rem;
      color: $medium-fontColor;
      background: #f5f5f5;
    }
  }
}

.hotSearch {
  margin-top: 0.24rem;
  &__header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 0.22rem;
    color: $content-fontColor;
    &__title {
      font-size: 0.16rem;
    }
  }
  &__lists {
    display: flex;
    flex-wrap: wrap;
    margin: 0.12rem 0 0 -0.1rem;
    &__item {
      height: 0.32rem;
      line-height: 0.32rem;
      font-size: 0.14rem;
      border-radius: 0.02rem;
      margin-left: 0.1rem;
      margin-top: 0.12rem;
      padding: 0 0.1rem;
      color: $medium-fontColor;
      background: #f5f5f5;
    }
  }
}
</style>
